<template>
  <div id="trade-view"></div>
</template>

<script>
  import { widget } from '../../static/charting_library/charting_library.min.js'
  import datafeeds from '@/js/datafees.js'
  import { baseUrl } from '@/config/env'
  import { klineApi } from '@/api/getData'
  export default {
    props:['nowPrice','symbolValue','type','klineObj','defaultfloatPrecision'],
    data() {
      return {
        symbol: this.symbolValue,
        interval: '15min',
        chart: null,
        initdata:{},
        countDate: 0, //累加条数
        startData: 0, //起始条数
        lengsData: 200, //结束长度
        datafeeds: new datafeeds(this),
        onLoadedCallback: null, //初始数据回调
        onRealtimeCallback: null, //websocket数据回调
        baseUrl,
        pageRequire:0,
        websock:null,
        timerY:null,
        newId:'',
      }
    },
    created() {

      // this.symbol = this.symbolValue;
      //console.log(this.symbol+'最新价格'+this.nowPrice)
      // console.log(this.symbolValue)
    },
    computed:{
      getCoin(){
        return this.symbolValue
      },
      getTimes(){
        return this.interval
      }
    },
    watch:{
      symbolValue(newvalue,oldvalue){
        console.log("new Value:"+newvalue)
        console.log("old Value:"+oldvalue)
      },
      getCoin(newValue){
        var self = this;
        self.symbol = ((newValue).split('-'))[0];
        self.chart.chart().setChartType(1);
        self.chart.setSymbol(self.symbol, self.filter(self.interval));

        // self.loadChart();
      },
      getTimes(newValue){
        var that = this;
        // that.webSocket();
        // that.getAjaxData();
      }
    },

    methods: {

      filter(time) {
        if(time == '1min')
          return '1';

        else if(time == '5min')
          return '5';

        else if(time == '15min')
          return '15';

        else if(time == '30min')
          return '30';

        else if(time == '60min')
          return '60';

        else if(time == '4hour')
          return '240'

        else if(time == '1day')
          return '1D';

        else if(time == '1week')
          return '1W';
      },

      //ajax
      getBars(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback) {
        this.getAjaxData();
        this.onLoadedCallback = onLoadedCallback;
      },
      //socket
      subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) {
        var that = this;
        that.onRealtimeCallback = onRealtimeCallback;
        if(that.type == 1){
          clearInterval(that.timerY);
        }
        if(that.timerY != null){
          that.timerY = clearInterval(that.timerY);
        }
        that.webSocket();
      },

      //获取配置信息
      getSymbol(symbol) {

        //console.log("//刻度值,保留小数，如：2位小数传100，"+this.defaultfloatPrecision)
        return {
          'name': symbol,
          'full_name': symbol,
          'timezone': 'Asia/Shanghai',
          'minmov': 1,
          'minmov2': 0,
          'pointvalue': 1,
          'fractional': false,
          'session': '24x7',
          'has_intraday': true,
          'has_no_volume': false,//是否将成交量独立出来
          'description': symbol,
          'pricescale':  10**this.defaultfloatPrecision,//刻度值,保留小数，如：2位小数传100，
          'ticker': symbol,
        }
      },

      //设置品信息(重新获取初始数据/推送数据)
      setSymbols() {
        let self = this;
        self.chart.setSymbol(self.symbol, self.filter(self.interval),function(){
          self.chart.chart().setVisibleRange(self.initdata)
          self.chart.chart().executeActionById("timeScaleReset");
        });
      },

      //卸载K线
      removeChart() {
        if (this.chart) {

          this.chart.remove();
          this.chart = null;
        }
      },

      //加载K线图插件
      loadChart() {

        let self = this;
        var local = sessionStorage.getItem('language');
        var languageTxt = '';

        if(local == 'en'){
          languageTxt = 'en'
        }else if(local == 'jp'){
          languageTxt = 'ja'
        }else if(local == 'ko'){
          languageTxt = 'ko'
        }else{
          languageTxt = 'zh_TW'
        }
        this.chart = new widget({
          container_id: 'trade-view',
          symbol: self.symbol,
          interval: self.filter(self.interval),
          locale: languageTxt,
          theme: 'Dark',
          debug: false,//注释在控制台打印的错误
          // autosize: true,
          // // //图标宽度
          width: '100%',
          // //图标高度
          height: 565,
          // fullscreen: true,
          // preset: "mobile",
          datafeed: this.datafeeds,
          timezone: 'Asia/Shanghai',
          library_path: 'static/charting_library/',
          indicators_file_name: "custom-study.js",
          drawings_access: {type: 'black',tools: [{name: "Regression Trend"}]},
          toolbar_bg: '#131722',//左侧工具栏背景颜色
          loading_screen: {//定制加载进度条
            backgroundColor: "#131722"
          },
          charts_storage_url: 'http://saveload.tradingview.com',
          charts_storage_api_version: "1.1",
          client_id: 'tradingview.com',
          overrides: self.overrides(),
          //启用的功能
          enabled_features: [
            'same_data_requery',
            'disable_resolution_rebuild',//显示的时间与得到的数据时间一致
            'study_templates',
          ],

          //面板上禁用的功能
          disabled_features: [
            //"header_resolutions", //时间选择、分时切换
            "timeframes_toolbar", //底部时间栏
            //"header_screenshot", //截图相机
            //"header_symbol_search", //搜索框
            "header_saveload",//储存
            //'save_chart_properties_to_local_storage',
            "volume_force_overlay",//在主数据列的同一窗格上放置成交量指示器
            //"use_localstorage_for_settings",//允许将用户设置保存到localstorage
            //"header_chart_type",//图表类型切换
            //"header_compare",//头部对比信息按钮
            //"display_market_status",
            "header_undo_redo", //头部左右箭头
            //"header_indicators", //指标
            //"snapshot_trading_drawings",//包含屏幕截图中的订单/位置/执行信号
            //"header_settings", //设置按钮
          ],
          studies_overrides: {
            //柱状图颜色
            "volume.volume.color.0": "#FA5252",
            "volume.volume.color.1": "#12B886",

            "MA Cross.short:plot.color": "#6B3798",
            "MA Cross.long:plot.color": "#708957",

            //MACD样式
            "MACD.MACD.color": "#F6D399",
            "MACD.Signal.color": "#3884FF",
            "MACD.Histogram.color": "#6fc1a1",
            'MACD.Histogram.linewidth': 4,
          },
        });

        this.chart.onChartReady(function() {//创建tradingview图
          try {
            //1min按钮
            self.chart.createButton()
              .attr('title', "1min")
              .on('click', function(e) {

                if ($(this).hasClass("selected")) return;
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find(".selected")
                  .removeClass("selected");
                self.interval = '1min';
                $(this).find('span').css('color','#2178FB');
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find("span").css('color','#61688a');
                self.chart.chart().setChartType(1);
                self.chart.setSymbol(self.symbol, "1");
              })
              .append('<span style="color: #61688a;">1min</span>');
            //5min按钮
            self.chart.createButton()
              .attr('title', "5min")
              .on('click', function(e) {
                if ($(this).hasClass("selected")) return;
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find(".apply-common-tooltip.selected")
                  .removeClass("selected");
                self.interval = '5min';
                $(this).find('span').css('color','#2178FB');
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find("span").css('color','#61688a');
                self.chart.chart().setChartType(1);
                self.chart.setSymbol(self.symbol, "5");
              })
              .append('<span style="color: #61688a;">5min</span>');
            // //15min按钮
            self.chart.createButton()
              .attr('title', "15min")
              .on('click', function(e) {
                if ($(this).hasClass("selected")) return;
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find(".apply-common-tooltip.selected")
                  .removeClass("selected");
                self.interval = '15min';
                $(this).find('span').css('color','#2178FB');
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find("span").css('color','#61688a');
                self.chart.chart().setChartType(1);
                self.chart.setSymbol(self.symbol, "15");
              })
              .append('<span style="color: #2178FB;">15min</span>');
            //30min
            self.chart.createButton()
              .attr('title', "30min")
              .on('click', function(e) {
                self.interval = '30min';
                $(this).find('span').css('color','#2178FB');
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find("span").css('color','#61688a');
                self.chart.chart().setChartType(1);
                self.chart.setSymbol(self.symbol, "30");
              })
              .append('<span style="color: #61688a ;">30min</span>');

            //1hour
            self.chart.createButton()
              .attr('title', "60min")
              .on('click', function(e) {
                self.interval = '60min';
                $(this).find('span').css('color','#2178FB');
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find("span").css('color','#61688a');
                self.chart.chart().setChartType(1);
                self.chart.setSymbol(self.symbol, "60");
              })
              .append('<span style="color:  #61688a;">1H</span>');

            //4hour
            self.chart.createButton()
              .attr('title', "4hour")
              .on('click', function(e) {
                self.interval = '4hour';
                $(this).find('span').css('color','#2178FB');
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find("span").css('color','#61688a');
                self.chart.chart().setChartType(1);
                self.chart.setSymbol(self.symbol, "240");
              })
              .append('<span style="color:  #61688a;">4H</span>');

            //1day
            self.chart.createButton()
              .attr('title', "1day")
              .on('click', function(e) {
                self.interval = '1day';
                $(this).find('span').css('color','#2178FB');
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find("span").css('color','#61688a');
                self.chart.chart().setChartType(1);
                self.chart.setSymbol(self.symbol, "1D");
              })
              .append('<span style="color:  #61688a;">1D</span>');

            //1week
            self.chart.createButton()
              .attr('title', "1week")
              .on('click', function(e) {
                self.interval = '1week';
                $(this).find('span').css('color','#2178FB');
                $(this)
                  .addClass("selected")
                  .parents(".group-wWM3zP_M-")
                  .siblings(".group-wWM3zP_M-")
                  .find("span").css('color','#61688a');
                self.chart.chart().setChartType(1);
                self.chart.setSymbol(self.symbol, "1W");
              })
              .append('<span style="color:  #61688a;">1W</span>');

            //图标属性
            self.chart.createButton()
              .attr('title',self.$t('nav.iconName'))
              .on('click', function(e) {
                self.chart.save(function(data) {
                  self.chart.chart().executeActionById("chartProperties");
                })
              })
              .append('<img src="setting.svg" width="20" align="center"/>');

            //指标
            self.chart.createButton()
              .attr('title', self.$t('nav.quota'))
              .on('click', function(e) {
                self.chart.save(function(data) {
                  self.chart.chart().executeActionById("insertIndicator");
                })
              })
              .append('<img src="quota.svg" width="20" align="center"/>');

            self.chart.chart().createStudy("Moving Average", !1, !1, [5], null, {'Plot.color': '#E6D399'});
            self.chart.chart().createStudy("Moving Average", !1, !1, [10], null, {'Plot.color': '#C479E5'});
            self.chart.chart().createStudy("Moving Average", !1, !1, [30], null, {'Plot.color': '#8ADDC6'});
            //self.chart.chart().createStudy('指数平滑异同移动平均线(MACD_Custom)', false, false, [20], null, {});//自定义MACD,底部涨幅条
            //self.chart.chart().createStudy('MACD', false, false, [12], null, {});//自定义MACD,底部涨幅条

          } catch(e) {}
        })

      },

      overrides() {
        let style = {
          up: "#6FC1A1",//阳线
          down: "#EC6543",//阴线
          bg: "#121527",
          grid: "#1e2235",//方格
          grid: "#0066ED",//方格
          cross: "#9194A3",//十字交叉记号
          border: "#4e5b85",
          borderUpColor: "#6FC1A1",
          borderUpColor: "#0066ED",
          borderDownColor: "#EC6543",
          borderDownColor: "#0066ED",
          text: "#61688A",
          areatop: "rgba(122, 152, 247, .2)",
          areadown: "rgba(122, 152, 247, .02)"
        };

        return {
          //窗格背景
          "paneProperties.background": "#141826",
          //纵向网格线颜色
          "paneProperties.vertGridProperties.color": "#161b29",
          //横向网格线颜色
          "paneProperties.horzGridProperties.color": "#161b29",
          //标记水印透明度
          "symbolWatermarkProperties.transparency": 0,
          //刻度属性文本颜色
          "scalesProperties.textColor": '#757575',
          // 设置坐标轴字体大小
          //'scalesProperties.fontSize': 16,
          //不隐藏左上角标题
          'paneProperties.legendProperties.showLegend': true,
          'left_toolbar': false,
          //销量面板尺寸，支持的值: large, medium, small, tiny
          "volumePaneSize": "large",
          //隐藏左边尺度
          "scalesProperties.showLeftScale" : false
        };
      },

      //ajax获取初始数据
      getAjaxData() {
        let self = this;
        self.$nextTick(async () => {
          var dataArr = new URLSearchParams();
          dataArr.set('symbol',self.symbol);
          dataArr.set('period',self.interval);
          dataArr.set('size',600);
          dataArr.set('type',self.type);
          var result = await klineApi(dataArr);
          // console.log(result)
          if(result.success){
            let
              bars = [],
              data = result.data;

            if(self.type == 1){
              data.reverse();
            }
            data.forEach(item => {
              let newObj = {
                //差8个小时 8*3600*1000
                // time: (Number(item.id) * 1000)+8*3600*1000,
                time: (Number(item.id) * 1000),
                close: item.close,
                open: item.open,
                high: item.high,
                low: item.low,
                volume: item.amount
              }

              bars.push(newObj)
            })
            self.startData = self.startData + self.lengsData + self.countDate + 1;
            self.onLoadedCallback(bars);
          }
        })
      },

      //获取推送数据
      webSocket() {
        let self = this;

        // if(self.type == 1){
        // console.log('合约')
        self.timerY = setInterval(() =>{
          self.$nextTick(async () => {
            var dataArr = new URLSearchParams();
            dataArr.set('symbol',self.symbol);
            dataArr.set('period',self.interval);
            dataArr.set('size',600);
            dataArr.set('type',self.type);
            var result = await klineApi(dataArr);
            if(result.success){
              var obj = result.data;
              // console.log(obj);
              var arrLength = obj.length;

              if(arrLength>0){
                if(self.type == 1){
                  obj.reverse();
                }
                //obj[arrLength-1].close=self.nowPrice
                obj.forEach((item,index)=>{
                  if(index == (arrLength-1)){
                    if(self.newId !=item.id){
                      var item222 = obj[arrLength-2]
                      let dise = {
                        time: (item222.id) * 1000,
                        open: item222.open,
                        close: item222.close,
                        high: item222.high,
                        low: item222.low,
                        volume: item222.amount
                      };
                      //item.close=self.nowPrice
                      // console.log(dise);
                      self.$emit('getValueDise',dise)
                      self.onRealtimeCallback(dise)
                    }
                    let dise = {
                      time: (item.id) * 1000,
                      open: item.open,
                      close: item.close,
                      high: item.high,
                      low: item.low,
                      volume: item.amount
                    };
                    //item.close=self.nowPrice
                    // console.log(dise);
                    self.$emit('getValueDise',dise)
                    self.newId=item.id
                    self.onRealtimeCallback(dise)
                  }
                  //if (obj.length>0) {
                  //obj[obj.length-1].close=self.nowPrice
                  // console.log(self.symbol+'最新价格'+self.nowPrice)
                  //}


                })
              }

            }
          })

        },1000)
        // }else{
        // var pako = require('pako');
        // var a = self.symbol;
        // var b,coinType = '';
        // b = a.toLowerCase();
        // coinType = b.replace(/\//g,'');

        // let subK = { // 订阅数据
        // 	sub: "market."+ coinType +".kline."+self.interval,
        // 	id: coinType+self.interval
        // };

        // try {self.websock.close()} catch(e) {}

        // self.websock = new WebSocket('wss://api.huobi.pr/ws');
        // self.websock.onopen = function () {
        // 	// console.log("建立联接");
        // 	self.websock.send(JSON.stringify(subK));
        // };
        // self.websock.onmessage = function(event) {
        // 	let blob = event.data;
        // 	let reader = new FileReader();
        // 	reader.onload = function (e) {
        // 		let ploydata = new Uint8Array(e.target.result);
        // 		let msg = pako.inflate(ploydata, {to: 'string'});
        // 		self.handleData(msg);
        // 	};
        // 	reader.readAsArrayBuffer(blob, "utf-8");
        // };
        // /*连接关闭*/
        // self.websock.onclose = evt => {
        // 	// self.webSocket();
        // 	// console.log("webSocket连接关闭");
        // };
        // /*连接发生错误时*/
        // self.websock.onerror = (evt,e) => {
        // 	// console.log(evt);
        // };

        // }

      },
      handleData(msg){
        var self = this;
        let data = JSON.parse(msg);
        if (data.ping) {
          // 如果是 ping 消息
          self.sendHeartMessage(data.ping);
        } else if (data.status === 'ok') {
          // 响应数据
          self.handleReponseData(data);
        } else {
          // 数据体
          var obj = data.tick;
          // console.log(obj)
          let dise = {
            time: (obj.id) * 1000,
            open: obj.open,
            close: obj.close,
            high: obj.high,
            low: obj.low,
            volume: obj.amount
          };
          if(self.type == 1){
            self.$emit('getValueDise',dise);
          }
          self.onRealtimeCallback(dise)
        }
      },
      sendHeartMessage(ping) {
        this.websock.send(JSON.stringify({"pong": ping}));
      },
      handleReponseData(data) {
        // console.log(data)
      }
    },
    created(){

    },
    mounted() {
      let self = this;
      //加载K线图
      self.loadChart();
    },
    beforeDestroy(){
      var self = this;
      if(self.websock){
        self.websock.close();
      }
      self.timerY=clearInterval(self.timerY);
    }
  }
</script>
<style>
  #trade-view{
    margin: 20px 0px;
  }
</style>
